<template>
	<view>
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft" style="overflow: auto hidden;">
			<uni-view class="flex text-center">
			<view class="cu-item flex-sub" :class="index == TabCur?'text-blue cur':''" v-for="(item,index) in allList" :key="index" @tap="tabSelect"
			 :data-id="index">
				处方{{index+1}}
			</view>
			</uni-view>
		</scroll-view>
		<view class="container">
			<span class="title" style="margin-top: 10px;">创业惠康医院</span>
			<span class="title">处方笺</span>
			<span class="medi-block">普通药品处方</span>
		</view>

			<view class="column" style="margin-top: 40px;padding: 0 20rpx 0 20rpx;"> 
				<view class="row" style="justify-content: space-between;;">
					<span>姓名 {{allList[TabCur].ConsultAsk.person_name}}</span>
					<span>性别 {{allList[TabCur].ConsultAsk.persong_gender_name}}</span>
					<span>年龄 {{allList[TabCur].ConsultAsk.person_age}}</span>
					<span>日期 {{allList[TabCur].ConsultAsk.accept_time}}</span>
				</view>
				<view class="row" style="margin-top: 20px;justify-content: space-between;;">
					<span>身份证号 {{allList[TabCur].ConsultAsk.person_card_id}}</span>
					<span>手机号 {{allList[TabCur].ConsultAsk.person_phone_no}}</span>
				</view>
			</view>
			
			<view style="margin-top: 100px;position: relative;" >
				<view class="line"></view>
				<view class="column" style="padding:0 40rpx 0 40rpx">
					<span style="margin-top: 10px;" class="title">Rp</span>
					<view v-show="TabCur==index" v-for="(item2,index) in allList" :key="index">
						<view  v-for="(item,index) in item2.List" :key="index">
							<span style="margin-top: 10px;">{{item.drug_name}}</span>
							<span class="ab" style="right:50rpx">{{item.quantity}}{{item.pack_unit}}</span>
							<span style="font-size: 14px; color: rgb(120,120,120);">用法:  {{item.does}}/次  {{item.frequency_name}} {{item.usage_name}}</span>
							<span class="ab" style="top:100px;right:50rpx">药费： <span style="color: rgb(221,118,62);">¥{{item.price}}</span>元</span>
						</view>
					</view>
					<span style="margin-top: 100px;">处方医师：{{allList[TabCur].ConsultAsk.doctor_name}}</span>
					<span class="ab" style="top:175px;right:100rpx">盖章：</span>
					<span>审核医师：</span>
					<span>发药医师：</span>
					<view class="row" style="justify-content: center;">
					<span style="margin-top: 30px ;font-size: 12px; color: rgb(120,120,120);">*药师温馨提示：请遵医嘱服药！处方当日有效！</span>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	var time=require('../../common/timeChange');
	export default {
		data() {
			return {
				consultId:-1,
				TabCur: 0,
				scrollLeft: 0,                                                                    
				navTop:[
					{  
						id: 1,
						title: '处方1'
					},
					{
						id: 2,
						title: '处方2'
					},
					{
						id: 2,
						title: '处方3'
					},
				],

				form: {
					name: "童晓航",
					sex: "男",
					age: "29岁",
					date: "2019-07-09",
					id: "330781199112182333",
					phone: "15306518065"
				},

				drug: {
					type: "Rp",
					name: "鼻炎颗粒",
					num: "1.00盒",
					description:"用法:  1.00g/次   bit   口服",
					price: 0.01,
					doctor: "林凤娇"
				},
				
				allList:null,
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			},
		},
		onLoad(options) {
			this.consultId= options.consultId;
			console.log(options.consultId);
			console.log(this.consultId);
			uni.request({
				url: 'http://121.43.172.59:8080/prescriptioninfo/getdetails', //仅为示例，并非真实接口地址。
				data: {//参数
						consult_id:1
					},
				header: {
						'consult_id': '1'//自定义请求头信息
					},
			    method:'POST',//请求方式  或GET，必须为大写
				success: res => {
						console.log('返回', res.data);
						this.allList=res.data;
						this.allList.map((item) => {
							item.ConsultAsk.accept_time=time.timeChange(item.ConsultAsk.accept_time);
						})
						}
				});
			    fail:res =>{
			        console.log("请求失败");
			    }
			
		  }
	}
</script>

<style>
		
	.ab{
		position: absolute;
	}
	
	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.title {
		display: block;
		font-size: 1.5em;
		font-weight: bold;
	}

	.medi-block {
		border: #000000 1px solid;
		padding: 2rpx 5rpx 2rpx 5rpx;
		height: 80rpx;
		width: 100rpx;
		position: absolute;
		top: 35px;
		right: 20rpx;
	}


	.row {
		display: flex;
		flex-direction: row;
	}

	.column {
		display: flex;
		flex-direction: column;
	}


	.line {
		height: 2px;
		margin: 0 20rpx 0 20rpx;
		width: 710rpx;
		background-color: #000000;
	}
</style>
